<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		myData
	} from '../../data/mock/my';
	import {
		loginToken,
		userStore
	} from '@/stores'

	const tokenStore = loginToken()
	const userInfoStore = userStore()

	const lists = ref(myData)
	const user = ref({})
	const wechatCode = ref('')

	//读取缓存
	const loadUserInfo = () => {
		const saveUserInfo = uni.getStorageSync('userInfo')
		if (saveUserInfo) {
			user.value = saveUserInfo
		}
	}
	//清除缓存和更新数据
	const handleLogout = () => {
		tokenStore.clearToken()
		userInfoStore.clearUserInfo()
		user.value = {}
		uni.showToast({
			title: '已退出登录'
		})
	}
	const goLogin = () => {
		uni.login({
			provider: 'weixin',
			success: (loginRes) => {
				wechatCode.value = loginRes.code
				// uni.showToast({
				// 	title: '已获取code，请授权信息',
				// 	icon: 'none'
				// })
			},
			fail: (err) => {
				console.error('微信登录失败:', err)
				uni.showToast({
					title: '登录失败',
					icon: 'none'
				})
			}
		})
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
	const logout = () => {
		handleLogout()
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
	const handleEvent = (item) => {
		if (item.text === '行程记录') {
			uni.switchTab({
				url: '/pages/journey/journey'
			})
		} else if (item.text === '开发票') {
			uni.showModal({
				content: '开票需求，请联系客服：13805880588'
			})
		} else if (item.text === '客服电话' || item.text === '一键报警') {
			uni.showModal({
				content: '可在手机端拨打' + item.text,
				confirmText: '复制',
				cancelText: '取消',
				success(res) {
					if (res.confirm) {
						uni.setStorageSync('copy', item.text)
						uni.showToast({
							title: '已复制到剪切板'
						})
					}
				}
			})
		} else {
			uni.navigateTo({
				url: '/pages/agreement/user'
			})
		}
	}
	onShow(() => {
		loadUserInfo()
	})
</script>

<template>
	<view class="my">
		<uni-nav-bar dark :fixed="true" background-color="#03bf5f" status-bar title="个人中心" />
		<view class="message">
			<view class="box">
				<image :src="user.avatarUrl || '/static/images/my.png'" mode="scaleToFill" />
				<text v-if="user.nickName">{{user.nickName}}</text>
				<text class="goLogin" @click="goLogin" v-else>请先登录</text>
			</view>
		</view>
		<view class="content">
			<view class="part" v-for="(item,index) in lists" :key="index" @click="handleEvent(item)">
				<view class="title">
					<image :src="item.imgurl" />
					<text>{{item.text}}</text>
				</view>
				<text style="margin-right: 23px;">></text>
			</view>
		</view>
		<text class="logout" @click="logout" v-if="user.nickName">退出登录</text>
	</view>
</template>

<style lang="scss" scoped>
	@import '../../styles/_rpx.scss';

	.message {
		background-color: #03bf5f;
	}

	.message {
		height: rpx(118);
	}

	.box {
		display: flex;
		flex-direction: column;
		height: auto;
		gap: rpx(8);
		text-align: center;

		text {
			color: #ffffff;
		}
	}

	.box image {
		width: rpx(55) !important;
		height: rpx(55) !important;
		border-radius: rpx(30);
		margin: rpx(25) auto auto auto;
	}

	.goLogin {
		color: #ffffff;
	}

	.content {
		width: rpx(347);
		height: auto;
		border-radius: 10px;
		margin: 20px auto auto;
		background-color: #ffffff;
		line-height: 100px;
	}

	.part {
		display: flex;
		height: rpx(43);
		line-height: rpx(43);
		justify-content: space-between;
		border-bottom: 1px solid #ededed;
	}

	.title {
		display: flex;
	}

	.title image {
		width: rpx(17);
		height: rpx(17);
		margin: auto rpx(16) auto rpx(19);
	}

	.logout {
		display: flex;
		justify-content: center;
		color: #999999;
		margin-top: rpx(28);
	}
</style>